<template>
	<view class="tabbox" :style="{height:height+'px'}">
		<view class="order-list box d-ai-c">
			<view class="">
				订单编号：
			</view>
			<view class="">
				{{orderInfo.orderNo}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				下单时间：
			</view>
			<view class="">
				{{orderInfo.createTime}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				服务类型：
			</view>
			<view class="" v-if="orderInfo.type==1">
				门诊陪伴
			</view>
			<view class="" v-if="orderInfo.type==2">
				血透门诊陪伴
			</view>
			<view class="" v-if="orderInfo.type==3">
				代配药门诊陪伴
			</view>
		</view>
		
		<view class="order-list box d-ai-c">
			<view class="" >
				就诊对象：
			</view>
			<view class="">
				{{orderInfo.name}}（{{orderInfo.phone}}）
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				就诊医院：
			</view>
			<view class="">
				{{orderInfo.hospitalName}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				出发时间：
			</view>
			<view class="">
				{{orderInfo.startTime}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				出发地点：
			</view>
			<view class="">
				{{orderInfo.startAddress}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				出行方式：
			</view>
			<view class="" v-if="orderInfo.tripType==1">
				公交车
			</view>
			<view class="" v-if="orderInfo.tripType==2">
				网约车
			</view>
			<view class="" v-if="orderInfo.tripType==3">
				步行
			</view>
			<view class="" v-if="orderInfo.tripType==4">
				非急救转运
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				选定陪诊：
			</view>
			<view class="">
				{{orderInfo.accompanyName==''?'暂无选择':orderInfo.accompanyName}}
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				路程距离：
			</view>
			<view class="">
				{{orderInfo.distance/1000}}公里
			</view>
		</view>
		<view class="order-list box d-ai-c">
			<view class="">
				基本费用：
			</view>
			<view class="">
				￥{{orderInfo.basic}}
			</view>
		</view>
		<view class="order-list1 d-jc-sb box d-ai-c">
			<view class="">
				路程超出费用：￥{{orderInfo.exceed}}
			</view>
			<view class="" @tap="rules">
				计算规则
			</view>
		</view>
		<view class="order-list1 box d-jc-sb d-ai-c">
			<view class="">
				平台赠送陪诊综合保险，请您放心下单
			</view>
			<view class="" @tap="jumpdetail">
				查看详情
			</view>
		</view>
		<view class="orderbtn box d-ai-c">
			<view class="">
				￥{{orderInfo.money}}
			</view>
			<view class="" @tap="pay">
				支付
			</view>
		</view>
		<wybpopup ref="popup" type='center' :width="620" :height="400" :radius="0">
			<view class="popup-header box d-ai-c">
				<view class="flex-8">
					计算规则
				</view>
				<image @tap="close" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode=""></image>
			</view>
			<view class="content-type">
				陪诊费用为（5公里内）按标准价格收费，超过5公里，每5公里加收20元。 <br><text style="color: red;">（不足5公里按5公里计算）</text>
			</view>
			<view class="typeBtn" @tap="sure">
				确定
			</view>
		</wybpopup>
		<wybpopup ref="popup1" type='bottom' :radius="60">
			<view class="popup1">
				<view class="pop-t">
					<view>选择支付方式</view>
					<image class="pop_images1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode="" @tap="payclose()"></image>
				</view>
				<radio-group @change="radioChange">
					<label class="uni-lab" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image v-if="item.value==='1'" class="pop_images2" src="../../static/weixin@2x.png" mode=""></image>
							<image v-if="item.value==='2'" class="pop_images2" src="../../static/huiyuan@2x.png" mode=""></image>
							<view class="pop-name box">
								<text>{{item.name}}</text>
								<!-- <text class="ml-1" v-if="item.value==='2'">会员免费购买</text> -->
							</view>
						</view>
						<view>
							<radio :value="item.value" :color="color" :checked="index === current" />
						</view>
					</label>
				</radio-group>
				<view class="bot">
					<view class="font">
						需付款：<text style="color:#F25A49">￥{{orderInfo.money}}</text>
					</view>
					<view class="payment" type="default" @tap='paymoney'>
						立即支付
					</view>
				</view>
		
		
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
		          wybpopup
		       },
		data() {
			return {
				border:'60 60 0 0',
				orderNo:'',
				current:0,
				color:'#FF8338',
				height:400,
				orderInfo:'',
				items: [
					{
						value: '1',
						name: '微信支付',
					},
					{
						value: '2',
						name: '会员支付',
						checked: 'true'
					}
				
				],
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(60)
				}
			})
		},
		onLoad(option){
			this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/audio/101.mp3')
			this.orderNo = option.editItem
			console.log(this.orderNo)
			this.getorderInfo()
		},
		onShow() {
		  	
		},
		methods: {
			getorderInfo(){
				this.$api.orderInfo({
					orderNo:this.orderNo
				}).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.orderInfo = res.data.dataMap
					}
							
				})
			},
			jumpdetail(){
				uni.navigateTo({
					url:'../mine/Insurance'
				})
			},
			paymoney() {
				let _this = this
				let type = 1;
				if(this.current==0){
					type = 1
				}
				if(this.current==1){
					type=4
				}
				console.log(type)
				if(type==1){
					this.$api.wxpax({
						orderNo: _this.orderInfo.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							if(type==1){ //微信支付
								uni.requestPayment({
									appId:res.data.dataMap.appid,
								    provider: 'wxpay',
								    timeStamp:res.data.dataMap.timeStamp,
								    nonceStr: res.data.dataMap.nonceStr,
								    package: res.data.dataMap.package,
								    signType: 'MD5',
								    paySign: res.data.dataMap.paySign,
								    success:  (res) =>{
								        console.log('success:' + JSON.stringify(res));
										uni.showToast({
											title: '支付成功',
											duration: 500,
											icon: "none"
										});
										this.payclose()
										this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/audio/13.mp3')
										uni.reLaunch({
											url:'../mine/mine'
										})
										
								    },
								    fail: function (err) {
								       uni.showToast({
								       	title: '支付失败',
								       	duration: 500,
								       	icon: "none"
								       });
								    }
								});
							}
						}else{
							this.payclose()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}else if(type==4){
					this.$api.wxpax({
						orderNo: _this.orderInfo.orderNo,
						payType:type
					}).then((res) => {
						if(res.data.success){
							uni.showToast({
								title: '支付成功',
								duration: 2500,
								icon: "none"
							});
							this.payclose()
							this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/audio/13.mp3')
							uni.reLaunch({
								url:'../mine/mine'
							})
						}else{
							this.payclose()
							uni.showToast({
								title: res.data.message,
								duration: 2500,
								icon: "none"
							});
						}
					
								
					})
				}
				
			},
			radioChange: function(evt) {
				console.log(evt.detail.value)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			//支付弹框
			pay(){
				this.$refs.popup1.show()
			},
			payclose(){
				this.$refs.popup1.hide()
			},
			// 计算规则
			rules(){
				this.$refs.popup.show()
			},
			close(){
				this.$refs.popup.hide()
			},
			sure(){
				this.$refs.popup.hide()
			}
		}
	}
</script>

<style lang="less" scoped>
	// /deep/.wyb-popup-box{
	// 	position: fixed;
	// 	transition-timing-function: ease-out;
	// 	transition-property: opacity, transform;
	//     border-radius: 60rpx 60rpx 0rpx 0rpx!important;
	// }
	.bot{
		margin-top: 100rpx;
		text-align: center;
		.font{
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
		.payment{
			width: 670rpx;
			height: 100rpx;
			background: #FF8338;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			margin: 0 auto;
			margin-top: 40rpx;
		}
	}
	
	.pop-name>text:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 13rpx;
	}
	.pop-name>text:nth-child(2){
		display: block;
		width: 180rpx;
		height: 36rpx;
		border: 2rpx solid #F25A49;
		border-radius: 4rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #F25A49;
		line-height: 36rpx;
		text-align: center;
	}
	.uni-lab>view:nth-child(1){
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.uni-lab{
		width: 690rpx;
		height: 100rpx;
		margin: 0rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.pop_images2{
		width: 52rpx;
		height: 52rpx;
	}
	.pop-c{
		text-align: center;
		margin-bottom: 60rpx;
	}
	.pop-c>text:nth-child(1){
		font-size: 40rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-c>text:nth-child(2){
		font-size: 80rpx;
		font-weight: 800;
		color: #333333;
	}
	.pop-t{
		width: 750rpx;
		height: 80rpx;
		margin-top: 40rpx;
		position: relative;
	}
	.pop-t>view{
		position: absolute;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		left: 275rpx;
		
	}
	.pop_images1{
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		right: 40rpx;
	}
	.popup1 {
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		overflow: hidden;
	}
.tabbox{
	background: #F2F7FF;
	padding: 30rpx;
}
.order-list{
	width: 690rpx;
	height: 80rpx;
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 3rpx;
	view:nth-child(1){
		width: 150rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	view:nth-child(2){
		width: 500rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
		overflow: hidden; /*自动隐藏文字*/
		text-overflow: ellipsis;/*文字隐藏后添加省略号*/
		white-space: nowrap;/*强制不换行*/
	}
}
.order-list1{
	width: 630rpx;
	height: 80rpx;
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 3rpx;
	view:nth-child(1){
		font-size: 30rpx;
		font-weight: 500;
		color: #666666;
	}
	view:nth-child(2){
		font-size: 30rpx;
		font-weight: 500;
		color: #4CA8FD;
	}
}
.orderbtn{
	width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	view:nth-child(1){
		width: 50%;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #F25A49;
	}
	view:nth-child(2){
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #FF8338;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
}
.popup-header{
	height: 100rpx;
	padding: 0 30rpx 0 30rpx;
	view{
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	image{
		width: 48rpx;
		height: 48rpx;
	}
}
.content-type{
	width: 480rpx;
	height: 520rpx;
	// border:1px solid red;
	margin: 0 auto;
	margin-top: 15rpx;
	font-size: 26rpx;
	text-align: center;
	font-weight: 500;
	color: #333333;
}	
.typeBtn{
	width: 620rpx;
	height: 100rpx;
	background: #FF8338;
	line-height: 100rpx;
	text-align: center;
	color: #FFFFFF;
	font-size: 30rpx;
	position: fixed;
	bottom: 0rpx;
}
</style>
